<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="__CSS__/reset.css">
    <link rel="stylesheet" href="__CSS__/基础框架.css">
    <link rel="stylesheet" href="__CSS__/login.css">
    <script type='text/javascript' src='__JS__/jquery-3.5.1.min.js'></script>
    <style type='text/css'>
    #code {
        font-family: Arial, 宋体;
        font-style: italic;
        color: green;
        border: 0;
        padding: 2px 3px;
        letter-spacing: 3px;
        font-weight: bolder;
    }
</style>
</head>


<body>
    <div class="container-nav">
        <div id="nav-top"></div>
        <div class="container">
            <div class="nav">
                <nav id="nav-left">
                    <div class="nav-left tuwen">
                        <img id="logo" src="__IMG__/logo.png" alt="">
                        <span><b>LearnKu</b></span>
                        <img id="xiala" src="__IMG__/下拉.png" alt="">
                    </div>
                    <a href="#" class="nav-left">社区</a>
                    <!-- <a href="#" class="nav-left">动态</a> -->
                    <div class="nav-left tuwen">
                        <a href="">
                            <img id="shequ" src="__IMG__/所有社区.png" alt="">
                            <span>所有社区</span>
                            <img id="new" src="__IMG__/new.png" alt="">
                        </a>
                    </div>
                    <form action="">
                        <input type="" placeholder="搜索">
                    </form>
                </nav>
                <nav id="nav-right">
                    <a href="{:url('Index/view')}" class="nav-right">论坛门户</a>
                    <a href="{:url('Index/changePa')}" class="nav-right">修改密码</a>
                    <a href="{:url('Index/me')}" class="nav-right">上传头像</a>
                    <a href="{:url('User/login')}" class="nav-right">登录</a>
                    <a href="{:url('User/reg')}" class="nav-right">注册</a>
                    <a href="{:url('Index/logOut')}" class="nav-right">注销</a>
                    <a href="{:url('User/contact')}" class="nav-right">联系我们</a>
                    {if (session('uNick') !== null)}
                    <a href="" class="nav-right"><span>欢迎：{:session('uNick')}</span></a>
                    <img src="__POT__/{:session('uImg')}" alt="">
                    {/if}
                </nav>
            </div>
        </div>
    </div>
    <!-- 登录界面 -->
    <div class="centered">
        <div class="login">
            <div class="login-xx" class="login-form">
                <img src="__IMG__/bottom-logo.png" alt="">
                <h4>请登录</h4>
            </div>
            <form method="POST" action="{:url('doLogin')}" class="login-form" id="denglu" onSubmit="return checkFrom();" >
                <!-- onsubmit='return checkFrom(); false' -->
                <div class="div-bor">
                    <i class="icon-user icon-input" ></i>
                    <input type="text" placeholder="邮箱 or 手机 or 用户名" name="nick" id="" autocomplete="off">
                </div>
                <div class="div-bor">
                    <i class="icon-passw icon-input"></i>
                    <input type="password" placeholder="密码" name="pa" autocomplete="off">
                </div>
                <div onload='createCode()'>验证码：
                    <input type="text" id="input" autocomplete="off"/>
                    <input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' />
                    <!-- <input type="button" value="验证" onclick="validate()" /> -->
                </div>
                <div id="submit" >
                    <div class="div-bor">
                        <i class="icon-botton"></i>
                        <button type="submit"  id="yzm" >提交</button>
                    </div>
                    <div id="more-login" >
                        <a href="">忘记密码</a>
                        <span>or</span>
                        <a href="">注册</a>
                    </div>
                </div>
                <div id="fenge">
                    ——————— 第三方账号登录  ——————
                </div>
                <div class="div-bor">
                    <i class="icon-more" id="icon-weixin"></i>
                    <a href="" class="login-more " id="weixin">微信登录</a>
                </div>
                <div class="div-bor">
                    <i class="icon-more" id="icon-github"></i>
                    <a href="" class="login-more" id="github">GitHub登录</a>
                </div>
                
            </form>
        </div>
    </div>
    

    <div class="clear"></div>
    <div id="footer">
        <div id="footer-top">
            <div class="clumn">
                <div class="white-img bottom-img bottom-top1 bottom-nav">
                    <h4>
                        <img src="__IMG__/bottom-logo.png" alt="">
                        <span>关于 Learnlku</span>
                    </h4>
                </div>
                <div class="lh-3 bottom-center bottom-top1">
                    <h4>LearnKu是终身编程者的修到场<br>
                        摒弃世俗浮躁，追求技术精湛
                    </h4>
                </div>
                <div class="bottom-a bottom-img bottom-top1 botton-center">
                    <h4><a href=""></a>
                        <img src="__IMG__/蛋糕.png" alt="">
                        <span>LearnKu诞生的故事</span> 
                    </h4></a>
                </div>
            </div>
            <div class="clumn">
               <div class="bottom-nav">
                   <h4>资源推荐</h4>
               </div>
               <div class="botton-center lh-3 mobe-1 bottom-a">
                   <h4>
                    <a href="">《社区使用指南》</a><br>
                    <a href="">《文档撰写指南》</a><br>
                    <a href="">《Learnlku》社区规范</a>
                   </h4>
               </div>
            </div>
            <div class="clumn">
                <div class="bottom-nav">
                    <h4>赞助商</h4>
                </div>
                <div class="bottom-top3">
                    <a href=""><img src="__IMG__/UCLOUD.png" alt=""></a><br>
                    <a href=""><img src="__IMG__/又拍云.png" alt=""></a><br>
                    <a href=""><img src="__IMG__/sendClound.png" alt=""></a><br>
                </div>
            </div>
            <div class="clumn">
                <div class="bottom-nav">
                    <h4>其他信息</h4>
                </div>
                <div class="botton-center lh-3 mobe-1 bottom-a">
                    <h4>
                        <a href="">
                            <img src="__IMG__/点赞.png" alt="">
                            软件外包</a><br>
                        <a href="">
                            <img src="__IMG__/心跳.png" alt="">
                            成为版主</a><br>
                        <a href="">
                            <img src="__IMG__/键盘.png" alt="">
                            所有测试</a><br>
                        <a href="">
                            <img src="__IMG__/微信.png" alt="">
                            联系站长(反馈建议)</a>
                    </h4>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div id="footer-bottom">
                <a href="">粤ICP备18099781号-6</a> | <a href=""><img src="__IMG__/警徽.png" alt="">粤公网安备 44030502004330号</a> | <a href="https://learnku.com/lk">违法和不良信息举报</a>
                <p class="ui inverted signature">由 <a href="https://learnku.com/contact" >Summer</a> 设计和编码 <span>❤</span></p>
        </div>
    </div>
    <script type='text/javascript'>
        /** @type {HTMLCanvasElement} */
        var code; //在全局定义验证码  
        function createCode() {
            code = "";
            var codeLength = 4;
            //验证码的长度  
            var checkCode = document.getElementById("code");
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//随机数  
            for (var i = 0; i < codeLength; i++) {
                //循环操作  
                var index = Math.floor(Math.random() * 36);//取得随机数的索引（0~35）  
                code += random[index];//根据索引取得随机数加到code上  
            }
            checkCode.value = code;//把code值赋给验证码  
            // alert(code);
        }
        //校验验证码  
        function checkFrom(){
            
                var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写     
                if (inputCode.length <= 0) { //若输入的验证码长度为0  
                    alert("请输入验证码！"); //则弹出请输入验证码  
                   
                        return false;
                        alert("失败");
                    
                } else if (inputCode != code) { //若输入的验证码与产生的验证码不一致时  
                    alert("验证码输入错误！@_@"); //则弹出验证码输入错误  
                    createCode();//刷新验证码  
                    document.getElementById("input").value = "";//清空文本框 
                    
                        return false;
                        alert("失败");
                    
                } else { //输入正确时  
                    alert("合格！^-^");
                    
                        return true;
                        alert("成功");
                    
                }
            } 
        
        
    </script>
</body>
</html>